<template>
  <div>
    
    <div class="chain-link-bar-wrapper">
  		<el-breadcrumb separator-class="el-icon-arrow-right">
	  		<el-breadcrumb-item>积分管理</el-breadcrumb-item>
	  		<el-breadcrumb-item to="/drawCash">提现列表</el-breadcrumb-item>
	  	</el-breadcrumb>  
	  </div>

  

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>会员提现列表</span>
      </div>


      <el-tabs v-model="page.status" @tab-click="search">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待确认" name="1"></el-tab-pane>
        <el-tab-pane label="待转账" name="2"></el-tab-pane>
        <el-tab-pane label="提现成功" name="3"></el-tab-pane>
        <el-tab-pane label="提现失败" name="11"></el-tab-pane>
      </el-tabs>

      <div class="app-diliver-10"></div>
      <div class="app-diliver-10"></div>

      <div>
        <div class="app-display-inline app-margin-h-20">
          <span class="color-black-second font-size-text">关键字：</span>
          <el-input
            placeholder="手机号"
            v-model="page.keyWord"
            style="width: 260px;"
            clearable
            ></el-input>
        </div>

        <div class="app-display-inline app-margin-h-20">
          <SubmitButton
            type="primary"
            plain
            icon="el-icon-search"
            :before-submit="()=>{this.page.pageNum = 1}"
            :post-option="{
              url: searchUrl,
              data: page,
              callback: searchCB,
            }">搜索</SubmitButton>
        </div>
      </div>



      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>

      
      <el-table :data="drawList" stripe border style="width: 100%" @sort-change="sortMethod" class="nc-table-btn-ctrl">
        
        <el-table-column 
          type="index"
          :index="indexMethod">
        </el-table-column>

        <el-table-column label="会员">
          <template slot-scope="scope">
            {{scope.row.full_name}}
            <br>
            {{scope.row.phone}}
          </template>
        </el-table-column>
        <el-table-column label="提现方式" >
          <template slot-scope="scope">
            <span v-if="scope.row.draw_type == 0">{{scope.row.bank}}</span>
            <span v-if="scope.row.draw_type == 1">支付宝</span>
            <span v-if="scope.row.draw_type == 2">微信</span>
          </template>
        </el-table-column>
        <el-table-column label="账户">
          <template slot-scope="scope">
            {{scope.row.account_name}}
            <br>
            {{scope.row.account_no}}
          </template>
        </el-table-column>
        <el-table-column prop="money" label="提现金额">
          <template slot-scope="scope">
            <span class="text-bold color-danger">¥ {{scope.row.money}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" sortable="custom" label="提现时间" ></el-table-column>
        <el-table-column prop="draw_time" sortable="custom" label="转账时间" ></el-table-column>
        <el-table-column prop="remark" label="备注" ></el-table-column>
        <el-table-column prop="operator" label="操作人" ></el-table-column>
        <el-table-column prop="operator_time" label="操作时间" ></el-table-column>
        <el-table-column label="进度" >
          <template slot-scope="scope">
              <span v-if="scope.row.status == 1" class="color-warning text-bold">{{scope.row.status_str}}</span>
              <span v-if="scope.row.status == 2" class="color-theme text-bold">{{scope.row.status_str}}</span>
              <span v-if="scope.row.status == 3" class="color-success text-bold">{{scope.row.status_str}}</span>
              <span v-if="scope.row.status == 11" class="color-danger text-bold">{{scope.row.status_str}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.is_valid == 1" class="color-success text-bold">正常</span>
            <span v-if="scope.row.is_valid == 0" class="color-danger text-bold">异常</span>
          </template>  
        </el-table-column>
        <el-table-column min-width="150"  label="操作">
          <template slot-scope="scope">
            <NcButton
              v-if="scope.row.status == 1"
              type="primary"
              size="mini"
              :post-option="{url: confirmUrl, data: {id: scope.row.id}, callback: getPage, confirm: '确定将记录状态改为【已确认】吗？' }"
              >确 认</NcButton>
            <NcButton
              v-if="scope.row.status == 2"
              type="success"
              size="mini"
              :post-option="{url: setSuccessUrl, data: {id: scope.row.id}, callback: getPage, confirm: '确定将记录状态改为【提现成功】吗？' }"
              >提现成功</NcButton>
            <el-button
              size="mini"
              type="danger"
              plain
              v-if="(scope.row.status == 1 || scope.row.status == 2)"
              @click="setFailHandle(scope.row.id)">提现失败</el-button>

          </template>
        </el-table-column>

      </el-table>


      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>


    </el-card>
	

    <SetFailEditDialog :is-show="setFailEditDialogVisible" :row-data-fun="()=>{return rowDataForDialog();}"></SetFailEditDialog>


  </div>
</template>


<script>
  import DrawCashApi from '../../api/DrawCashApi'

  import JsonKit from '../../kit/JsonKit'

  import SetFailEditDialog from './SetFailEditDialog'
  import SubmitButton from '../common/SubmitButton'
  import NcButton from '../common/NcButton'
  

  import { mapGetters } from 'vuex'

  export default {
    components: {
      SubmitButton, NcButton, SetFailEditDialog
    },
    data(){
      return {
        page: {
          keyWord: '',
          status: '0',
          columnProp: '',
          columnOrder: '',
          pageNum: 1,
          pageSize: 10
        },

        drawList: [],

        searchUrl: DrawCashApi.URL_LIST,
        confirmUrl: DrawCashApi.URL_CONFIRM,
        setSuccessUrl: DrawCashApi.URL_SET_SUCCESS,

        setFailEditDialogVisible: false,
        setFailEditDrawId: 0,
      }
    },
    computed: {
      ...mapGetters(['hasPerm'])
    },
    mounted(){
       this.getPage();
    },
    created(){
      this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
    },
    beforeDestroy: function(){
      this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
    },
    methods: {
      sortMethod(column) {
        this.page.columnProp = column.prop;
        this.page.columnOrder = column.order;
        this.getPage();
      },
      search(){
        this.page.pageNum = 1;
        this.getPage();
      },
      searchCB(json){
        this.drawList = json.list;
        this.setPage(json);
      },
      getPage(){
        DrawCashApi.list(this.page, json=>{
          this.drawList = json.list;
          this.setPage(json);
        });
      },
      pageNumChange(pageNum){
        this.page.pageNum = pageNum;
        this.getPage();
      },
      pageSizeChange(pageSize){
        this.page.pageSize = pageSize;
        this.getPage();
      },
      setPage(json){
        this.page.pageNum = json.pageNum;
        this.page.pageSize = json.pageSize;
        this.page.totalRow = json.totalRow;
      },
      indexMethod(index){
        return index + 1 + (this.page.pageNum - 1) * this.page.pageSize
      },
      setFailHandle(drawId) {
        this.setFailEditDialogVisible = true;
        this.setFailEditDrawId = drawId;
      },
      rowDataForDialog(){
        return JsonKit.getOf(this.drawList, 'id', this.setFailEditDrawId);
      },
      hideEditDialog(isSuccess){
        this.setFailEditDialogVisible = false;
        this.setFailEditDrawId = 0;
        if (isSuccess) {
          this.getPage();
        }
      },
    }
  }
</script>
